{% extends "base.html" %}{% load i18n crm_tags %}
{% block title %}{{ call_list.name }}{% endblock %}
{% block content %}
<div class="page-head">
  <div>
    <p class="muted" style="margin:0 0 4px"><span class="tag p-{{ call_list.purpose }}">{{ call_list.get_purpose_display }}</span>{% if call_list.created_by %} · {% blocktranslate trimmed with who=call_list.created_by.display_name when=call_list.created_at|date:"j M Y" %}made by {{ who }}, {{ when }}{% endblocktranslate %}{% endif %}{% if call_list.due_date %} · {% blocktranslate trimmed with when=call_list.due_date|due %}finish by {{ when }}{% endblocktranslate %}{% endif %}</p>
    <h1>{{ call_list.name }}</h1>
    {% if call_list.chosen %}<p>{{ call_list.chosen }}</p>{% endif %}
  </div>
  <div class="actions">
    {% if user.is_supervisor %}<a class="btn" href="?export=csv">{% translate "Download (CSV)" %}</a>{% endif %}
    <a class="btn btn-quiet" href="{% url 'call_lists' %}">{% translate "All call lists" %}</a>
  </div>
</div>

{% if not call_list.is_open %}<ul class="flash"><li class="info">{% translate "This list is closed. Its callers are no longer waiting to be called." %}</li></ul>{% endif %}

<div class="list-progress big" role="img" aria-label="{% blocktranslate trimmed with done=progress.percent %}{{ done }}% done{% endblocktranslate %}"><span style="width:{{ progress.percent }}%"></span></div>
<div class="today-strip" role="list" style="margin-bottom:20px">
  <div role="listitem"><span class="n">{{ progress.total }}</span><span class="l">{% translate "Callers on the list" %}</span></div>
  <div role="listitem"><span class="n">{{ progress.reached }}</span><span class="l">{% translate "Reached" %}</span></div>
  <div role="listitem"><span class="n">{{ progress.not_reached|add:progress.wrong }}</span><span class="l">{% translate "Not reached or wrong number" %}</span></div>
  <div role="listitem"><span class="n">{{ progress.waiting }}</span><span class="l">{% translate "Still to call" %}</span></div>
</div>

{% if call_list.script %}
<section class="script-box" aria-labelledby="say-h">
  <h2 id="say-h">{% translate "What to say" %}</h2>
  <div class="script">{{ call_list.script|linebreaksbr }}</div>
</section>
{% endif %}

<section class="panel" aria-labelledby="mine-h">
  <div class="panel-head"><h2 id="mine-h">{% translate "Your callers" %}</h2>
    <span class="muted small">{% blocktranslate trimmed with done=my_progress.done total=my_progress.total %}{{ done }} of {{ total }} done{% endblocktranslate %}</span></div>
  {% if next_up %}
    <div class="next-up">
      <div class="grow"><span class="muted small">{% translate "Next" %}</span>
        <div><a class="title" href="{{ next_up.contact.get_absolute_url }}">{{ next_up.contact.name }}</a> <span class="phone">{{ next_up.contact.phone_display }}</span></div>
        {% if next_up.tries %}<div class="meta">{% blocktranslate trimmed count n=next_up.tries %}Tried {{ n }} time, no answer.{% plural %}Tried {{ n }} times, no answer.{% endblocktranslate %}</div>{% endif %}
      </div>
      <a class="btn btn-primary" href="{% url 'log_call' next_up.contact.pk %}?list_entry={{ next_up.pk }}">{% translate "Call now" %}</a>
    </div>
  {% endif %}
  {% if mine %}
  <ul class="rows">
    {% for e in mine %}
    <li>
      <div class="grow">
        <a class="title" href="{{ e.contact.get_absolute_url }}">{{ e.contact.name }}</a> <span class="phone small muted">{{ e.contact.phone_display }}</span>
        <div class="meta">{% if e.contact.location %}{{ e.contact.location }} · {% endif %}<span class="es es-{{ e.status }}">{{ e.get_status_display }}</span>{% if e.note %} · {{ e.note|truncatechars:90 }}{% endif %}</div>
      </div>
      {% if e.is_waiting and call_list.is_open %}<a class="btn btn-small" href="{% url 'log_call' e.contact.pk %}?list_entry={{ e.pk }}">{% translate "Call" %}</a>{% endif %}
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p class="muted">{% translate "No callers on this list are given to you." %}</p>
  {% endif %}
  {% if can_take %}
  <form method="post" style="margin-top:12px">{% csrf_token %}
    <button class="btn btn-small" type="submit" name="action" value="take">{% translate "Take more callers" %}</button>
    <span class="muted small">{% translate "When you have finished yours: takes up to 10 from whoever has the most left." %}</span>
  </form>
  {% endif %}
</section>

{% if user.is_supervisor %}
<div class="split-even" style="margin-top:20px">
  <section class="panel" aria-labelledby="people-h">
    <div class="panel-head"><h2 id="people-h">{% translate "Progress by person" %}</h2></div>
    {% if people %}
    <div class="table-wrap flat">
      <table>
        <thead><tr><th>{% translate "Agent" %}</th><th class="right">{% translate "Callers" %}</th><th class="right">{% translate "Reached" %}</th><th class="right">{% translate "Not reached" %}</th><th class="right">{% translate "Still to call" %}</th></tr></thead>
        <tbody>
        {% for row in people %}
          <tr><td><a href="?who={% if row.assigned_to %}{{ row.assigned_to }}{% else %}none{% endif %}#all-h">{{ row.name }}</a></td><td class="right num">{{ row.total }}</td><td class="right num">{{ row.reached }}</td><td class="right num">{{ row.not_reached }}</td><td class="right num">{{ row.waiting }}</td></tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}
  </section>

  <section class="panel" aria-labelledby="manage-h">
    <div class="panel-head"><h2 id="manage-h">{% translate "Manage the list" %}</h2></div>
    {% if call_list.is_open %}
    <form method="post" class="form">{% csrf_token %}
      {% include "_field.html" with field=share_form.agents wide=True %}
      <p class="small muted">{% translate "Callers already reached stay with whoever reached them." %}</p>
      <button class="btn" type="submit" name="action" value="share">{% translate "Share again" %}</button>
    </form>
    <form method="post" style="margin-top:16px">{% csrf_token %}
      <button class="btn btn-small btn-quiet" type="submit" name="action" value="close">{% translate "Close the list" %}</button>
      <span class="small muted">{% translate "When the work is done or no longer needed. Its callers stop showing as waiting." %}</span>
    </form>
    {% else %}
    <form method="post">{% csrf_token %}<button class="btn" type="submit" name="action" value="reopen">{% translate "Open the list again" %}</button></form>
    {% endif %}
  </section>
</div>

<section class="panel" aria-labelledby="all-h" style="margin-top:20px">
  <div class="panel-head"><h2 id="all-h">{% translate "Everyone on the list" %}</h2></div>
  <div class="filters">
    <div class="seg" aria-label="{% translate 'Status' %}">
      <a href="{% url_with show='' page='' %}#all-h"{% if not show %} aria-current="true"{% endif %}>{% translate "All" %}</a>
      {% for value, label in statuses %}<a href="{% url_with show=value page='' %}#all-h"{% if show == value %} aria-current="true"{% endif %}>{{ label }}</a>{% endfor %}
    </div>
    {% if who %}<a class="btn btn-small btn-quiet" href="{% url_with who='' page='' %}#all-h">{% translate "Everyone’s callers" %}</a>{% endif %}
  </div>
  {% if page.object_list %}
  <div class="table-wrap flat">
    <table>
      <thead><tr><th>{% translate "Caller" %}</th><th class="hide-sm">{% translate "Location" %}</th><th>{% translate "Agent" %}</th><th>{% translate "Status" %}</th><th class="hide-sm">{% translate "How it went" %}</th></tr></thead>
      <tbody>
      {% for e in page %}
        <tr>
          <td><a href="{{ e.contact.get_absolute_url }}">{{ e.contact.name }}</a><div class="phone small muted">{{ e.contact.phone_display }}</div></td>
          <td class="hide-sm small">{{ e.contact.location|default:"—" }}</td>
          <td>{{ e.assigned_to.display_name|default:"—" }}</td>
          <td><span class="es es-{{ e.status }}">{{ e.get_status_display }}</span>{% if e.tries %}<div class="small muted">{% blocktranslate trimmed count n=e.tries %}{{ n }} try{% plural %}{{ n }} tries{% endblocktranslate %}</div>{% endif %}</td>
          <td class="hide-sm small">{% if e.last_tried_at %}<span class="muted">{{ e.last_tried_at|when }}</span> {% endif %}{{ e.note|default:"" }}</td>
        </tr>
      {% endfor %}
      </tbody>
    </table>
  </div>
  {% include "_pager.html" %}
  {% else %}
  <p class="muted">{% translate "Nothing here." %}</p>
  {% endif %}
</section>
{% endif %}
{% endblock %}